<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>购物车 || 便民购在线</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="shortcut icon" href="/image/icon/litIcon.ico">
    <link href="/css/reset.css" rel="stylesheet" type="text/css"/>
    <link href="/css/page_car.css" rel="stylesheet" type="text/css"/>
    <link href="/css/page.css" rel="stylesheet" type="text/css"/>
    <script src="/js/jquey-1.8.0.min.js"></script>
</head>

<body>
<!-- 顶部导航 -->
<div th:replace="commonFragment :: #top"></div>
<!-- /顶部导航 -->

<!-- logo与进度反馈区域 -->
<div id="logo_line" class="car_wrap clear">
    <div class="logo fl"></div>
    <div class="shopCar_tit fl">
        <h1>购物车</h1>
    </div>
    <div class="order_path order_path_1 ">
    </div>
</div>
<div class="car_hr"></div>
<!-- /logo与进度反馈区域 -->

<div class="content_show_wrapper">
    <div id="group_show">
        <!-- 真品防伪码.. -->
        <div class="content_header clear">
            <div class="top_banner">
                <ul class="header_icons">
                    <li><span> <i class="icon_zhenpin header_icon png"></i> 真品防伪码 </span></li>
                    <li><span> <i class="icon_tuihuo header_icon png"></i> 30天无条件退货 </span></li>
                    <li><span> <i class="icon_baoyou header_icon png"></i> 美妆满2件或299元包邮 </span></li>
                </ul>
            </div>
            <div class="common_shippment"><i class="icon_small icon_baoyou png">包邮</i> 商品满2件或299元包邮,新用户首单全场满39元包邮</div>
        </div>
        <!-- /真品防伪码.. -->

        <!-- 商品阅览 -->
        <div class="groups_wrapper">
            <table class="cart_group_item  cart_group_item_product">
                <!-- 在线发货 -->
                <thead>
                <tr>
                    <th class="cart_overview">
                        <div class="cart_group_header">
                            <h2>在线发货</h2>
                        </div>
                    </th>
                    <th class="cart_price">售价（元）</th>
                    <th class="cart_num">数量</th>
                    <th class="cart_total">小计（元）</th>
                    <th class="cart_option">操作</th>
                </tr>
                </thead>
                <!-- /在线发货 -->

                <!-- 商品详细信息 -->
                <tbody class="hide">
                <tr class="cart_item" th:each="cart : ${carts}">
                    <!-- 左边图片区 -->
                    <td valign="top">
                        <div class="cart_item_desc clear">
                            <!-- 多选框 -->
                            <input th:id="${cart.id}" class="cart_item_selector" checked type="checkbox">
                            <div class="cart_item_desc_wrapper">
                                <a class="cart_item_pic" href="">
                                    <img th:src="@{/image/book/book_list4/list4_lit1.jpg}" alt="An apple">
                                    <span class="sold_out_pic png"></span></a>
                                <a class="cart_item_link" href="javascript:void(0)" th:text="${cart.prodName}">高品质苹果</a>
                                <p class="sku_info">规格：<span class="cart_item_attribute">彩色</span>&nbsp; </p>

                                <!-- 满减, 满赠 -->
                                <div class="sale_info clear">
                                    <div class="tips_pop_full float_box JS_tips_pop_full">
                                        <div><a class="sale_tag gift JS_sale_tag" data-promo-type="gift"> 满赠 <i
                                                class="icon_small png"></i> </a></div>
                                    </div>
                                    <div class="tips_pop_full float_box JS_tips_pop_full">
                                        <div><a class="sale_tag reduce JS_sale_tag" data-promo-type="reduce"> 满减 <i
                                                class="icon_small png"></i> </a></div>
                                    </div>
                                </div>
                                <!-- /满减, 满赠 -->
                            </div>
                        </div>
                    </td>
                    <!-- /左边图片区 -->

                    <!-- 售价 -->
                    <td>
                        <div class="cart_item_price">
                            <p class="jumei_price">[[${cart.unitPrice}]]</p>
                            <p class="market_price">59.00</p>
                        </div>
                    </td>
                    <!-- 售价 -->

                    <!-- 数量 -->
                    <td>
                        <div class="cart_item_num ">
                            <div class="item_quantity_editer clear" data-item-key="1057066_d150603p892053zc">
                                <!-- class="disabled" -->
                                <span class="decrease_one disabled">-</span>
                                <input class="item_quantity" th:value="${cart.prodCnt}" type="text">
                                <span class="increase_one disabled">+</span>
                            </div>
                            <div class="item_shortage_tip"></div>
                        </div>
                    </td>
                    <!-- /数量 -->

                    <!-- 总价 -->
                    <td>
                        <div class="cart_item_total">
                            <p class="item_total_price">[[${cart.totalPrice}]]</p>
                            <p>省 <span class="item_saved_price">11.00</span></p>
                        </div>
                    </td>
                    <!-- /总价 -->

                    <!-- 操作 -->
                    <td>
                        <div class="cart_item_option">
                            <a class="icon_small delete_item"
                               th:href="@{/agricultural/deleteCartById(id=${cart.id})}" title="删除"></a>
                        </div>
                    </td>
                    <!-- /操作 -->
                </tr>
                </tbody>
                <!-- 商品详细信息 -->

                <!-- 商品金额 -->
                <tfoot>
                <tr>
                    <td colspan="5"> 商品金额： ￥<span class="group_total_price" id="should_PayFor">141.00</span></td>
                </tr>
                </tfoot>
                <!-- /商品金额 -->
            </table>
        </div>
        <!-- 商品阅览 -->

        <!-- 去结算 -->
        <div class="common_handler">
            <div class="right_handler"> 共 <span class="total_amount"> 1 </span> &nbsp;件商品 &nbsp;&nbsp; 商品应付总额：￥
                <span class="total_price">141.00</span> <a id="go_to_order" class="btn"
                                                           href="lookOrderForm.html">去结算</a>
            </div>
            <label for="js_all_selector" class="cart_all_selector_wrapper">
                <input id="js_all_selector" class="js_all_selector all_selector" type="checkbox"> 全选 </label>
            <a class="go_back_shopping" th:href="@{/agricultural/index}">继续购物</a>
            <span class="seperate_line">|</span>
            <a class="clear_cart_all" href="">清空选中商品</a>
            <form id="form_to_order" action="" method="post" style="display: none;">
                <input name="items_key" type="hidden"></form>
        </div>
        <!-- /去结算 -->
    </div>
    <div id="cart_side_nav">
        <a href="javascript:void(0)"></a>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        let totalPrice = 0;
        let num = 0;
        $(".item_total_price").each(function () {
            totalPrice += parseFloat(this.textContent);
            num++;
        });
        $("#should_PayFor").text(totalPrice);
        $("span[class='total_amount']").first().text(num);
        $("span[class='total_price']").first().text(totalPrice);

        /*$("input[class='cart_item_selector']").each(function () {
            $(this).click(function () {
                if($(this).prop('checked')) {
                    $("#should_PayFor").text(totalPrice +);
                    $("span[class='total_amount']").first().text(num);
                    $("span[class='total_price']").first().text(totalPrice);
                }
            })
        });*/
    })
</script>
<!-- 页尾链接和版权信息 -->
<div id="footer" class="">
    <div class="footer_nav">
        <a href="" target="_blank" rel="nofollow">公司简介</a>
        <span class="sep">|</span>
        <a href="" target="_blank">合作关系</a>
        <span class="sep">|</span>
        <a href="" target="_blank" rel="nofollow">诚征英才</a>
        <span class="sep">|</span>
        <a href="" target="_blank">网站联盟</a>
        <span class="sep">|</span>
        <a href="" target="_blank">广告服务</a>
        <span class="sep">|</span>
        <a href="" target="_blank">平台招商</a>
        <span class="sep">|</span>
        <a href="" target="_blank" rel="nofollow">机构销售</a>
        <span class="sep">|</span>
        <a href="" target="_blank">便民购小程序</a>
        <span class="sep">|</span>
        <a href="">官方Blog</a>
    </div>
    <p class="padt10 textc cor2 lh20">&nbsp;
    </p>
    <p class="padt10 textc cor2 lh20"><a class="disin padlr10" href="" target="_blank">便民购在线</a>
        <a class="disin padlr10" href="" target="_blank">当当网</a>
        <a class="disin padlr10" href="" target="_blank">亚马逊</a>
        <span class="dinin padlr5">|</span>
        <a class="disin padlr10" href="">微博微信</a>
        <a class="disin padlr10" href="">天猫旗舰店</a>
        <a class="disin padlr10" href="" target="_blank">极客学院</a>
        <a class="disin padlr10" href="" target="_blank">桂林理工大学</a>
        <a class="disin padlr10" href="" target="_blank">电子商务</a>
    </p>
    <p class="padt10 textc cor2 lh20">&nbsp;</p>
    <small class="ft_pic_link" id="footerbanner2LazyLoad">
        <a rel="nofollow" target="_blank" href="https://online.unionpay.com/?tp=15.35979875.20.0.22.Kqsb84y-10-DHf4`">
            <img alt="" src="/image/copyright/01.jpg" height="31" width="90">
        </a>
        |
        <a rel="nofollow" target="_blank" href="http://creditcard.pingan.com/index.shtml">
            <img alt="" src="/image/copyright/02.jpg">
        </a>
        |
        <a rel="nofollow">
            <img alt="" src="/image/copyright/01.jpg">
        </a>
        |
        <a rel="nofollow" target="_blank" href="http://www.zx110.org/">
            <img alt="" src="/image/copyright/03.jpg">
        </a>
        |
        <a rel="nofollow" target="_blank" href="http://www.shodr.org/">
            <img alt="" src="/image/copyright/04.jpg">
        </a>
        |
        <a rel="nofollow" target="_blank" href="http://net.china.com.cn/index.htm">
            <img alt="" src="/image/copyright/05.gif">
        </a>
        |
        <a rel="nofollow" target="_blank"
           href="https://ss.knet.cn/verifyseal.dll?sn=e13050631010040492h5mq000000&amp;ct=df&amp;a=1&amp;pa=500267">
            <img alt="" src="/image/copyright/07.jpg">
        </a>
        |
        <a rel="nofollow" target="_blank"
           href="https://ss.knet.cn/verifyseal.dll?sn=e13050631010040492h5mq000000&amp;ct=df&amp;a=1&amp;pa=500267">
            <img alt="" src="/image/copyright/08.png">
        </a>
        |
    </small>
</div>
<!-- /页尾链接和版权信息 -->
<script src="/js/imgTab.js"></script>
</body>

</html>
